import * as React from 'react';
import {Modal, Form,message, Input, Icon} from 'antd';
import {SafeCodeModalProps} from '../../interface/component'
import './style.less';

const FormItem = Form.Item;

class SearchWrapper extends React.PureComponent<SafeCodeModalProps, any> {
    public onHandleOk = () => {
        this.props.form.validateFields((err, values):any => {
            if (!err) {
                if (values.safeCode.length < 6) {
                    return message.warn('请输入正确的安全码');
                }

                this.props.handleOk(values.safeCode);
            }
        });
    }

    public render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Modal
                title="风险检查"
                visible={this.props.visible}
                confirmLoading={this.props.confirmLoading}
                onOk={this.onHandleOk}
                onCancel={this.props.handleCancel}
            >
                <p>请输入安全码</p>
                <Form>
                    <FormItem style={{marginTop: 30}}>
                        {getFieldDecorator('safeCode', {
                            rules: [{required: true, message: 'Please input your Password!'}],
                        })(
                            <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                   type="password"
                                   placeholder="请输入安全码"/>
                        )}
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}


export default Form.create()(SearchWrapper);